<template>
	<view class="">
		<view class="calc150 pl20 v100 pr20 overauto  bgcontain no-repeat"
			:style="{ backgroundImage: 'url(' + cosImageUrl('head_bg.png',true) + ')' }">
			<view class="" :style="{'paddingTop':statusBarHeigh + 'px',}">
				<view class="flex alicen pl20" :style="{'height':menuButtonInfo.height + 'px',}">
					<u-icon name="arrow-left" color="#070707" size="18" @click="goback()"></u-icon>
				</view>
			</view>
			<view class="pb20"></view>
			<view class="flex alicen">
				<image class="w120 h120" :src="cosImageUrl('/Aiavatar.png',true)" mode="aspectFit"></image>
				<view class="fz30 ml30 bgfff ius35 pt20 pb20 pl20 pr20">我将结合您设置的个人偏好生成志愿表</view>
			</view>
			<view class="pb20"></view>
			<view class="flex alicen between ius20">
				<view class="flex1 pt20 pb20  flexCenter" :class="currIdx == 'major'?'bg0055ff colff':'bgfff col33' "
					@tap="selectTab('major')">专业</view>
				<view :class="currIdx == 'province'?'bg0055ff colff':'bgfff col33' " class="flex1 pt20 pb20  flexCenter"
					@tap="selectTab('province')">地区</view>
			</view>
			<view class="pb20"></view>
			<view class="" v-if="currIdx == 'major'">
				<view class="flex alicen between">
					<view class="">共{{list.length}}个</view>
					<view class="fz28 flex alicen" v-if="edit">
						<view class="" @tap="deledit()">删除</view>
						<view class=" ml10" @tap.stop="close()">取消</view>
					</view>
					<view class="fz28" v-else @tap.stop="edit = true">编辑</view>

				</view>
				<view class="pb20 bdr1_bottom boree" v-for="(item,index) in list" :key="index" @tap.stop="selectItem(item)">
					<view class="flex alicen between">
						<view class="fz28 pt20">{{item.sname||'--'}}</view>
						<image v-if="edit" class="w30 h30"
							:src="arr.includes(item)?cosImageUrl('check.png',true):cosImageUrl('nocheck.png',true)"
							mode="aspectFill"></image>
					</view>

				</view>
			</view>
			<view class="" v-if="currIdx == 'province'">
				<view class="flex alicen between">
					<view class="fz28">意向地区排序</view>
					<view class="fz28 flex alicen" v-if="edit">
						<view class="" @tap.stop="deledit()">删除</view>
						<view class=" ml10" @tap.stop="close()">取消</view>
					</view>
					<view class="fz28" v-else @tap.stop="edit = true">编辑</view>
				</view>
				<view class="flex alicen between" v-for="(item1,index1) in list" :key="index1"
					@tap.stop="selectItem(item1)">
					<view class="flex alicen">
						<view>{{index1+1}}</view>
						<view class="ml30">{{item1.sname||'--'}}</view>
					</view>
					<image v-if="edit" class="w30 h30"
						:src="arr.includes(item1)?cosImageUrl('check.png',true):cosImageUrl('nocheck.png',true)"
						mode="aspectFill"></image>

					<!-- <view class="">
						<view class="flex alicen">
							<image class="w30 h30" :src="cosImageUrl('check.png',true)" mode="aspectFill"></image>
							<view class="fz24 ml10">不考虑</view>
						</view>
						<view class="flex alicen">
							<image class="w30 h30" :src="cosImageUrl('nocheck.png',true)" mode="aspectFill"></image>
							<view class="fz24 ml10">考虑</view>
						</view>
					</view> -->

				</view>
			</view>

			<view class="flexCenter" v-if="list.length == 0">
				<image class="w40b h280" :src="cosImageUrl('/empty.png',true)" mode="aspectFill"></image>
			</view>

		</view>
		<view class="mb20  fixed w100b bgfff " :style="{'bottom':safeAreaBottom.safeAreaInsets.bottom +'rpx'}">
			<view @tap="gosearch()" class=" ml20 mr20 bgff000 colff pt20 pb20 ius100 col00 fz30 flexCenter">
				+{{currIdx == 'major'?'添加专业':'添加地区' }}</view>
			<view class="bgfff w100b fixed b0">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currIdx: 'major',
				list: [], //专业或者地区的数组
				edit: false, //编辑的变量
				arr: [], //判断是否删除数据的数组
			}
		},
		onShow() {
			this.member(); //
		},
		methods: {
			selectTab(index) {
				if (index == this.currIdx) return;
				this.currIdx = index
				this.edit = false
				this.member();
			},
			selectItem(item) {
				if (!this.edit) return;
				let a1 = this.arr.includes(item)

				if (!a1) {
					this.arr.push(item)
				}
				if (a1) {
					this.arr = this.arr.filter(item1 => item1 != item);
				}
			},
			async member() {
				let params = {
					userId: this.readData('useId')
				}
				let mem = await this.request.get('/api/queryMemberSetting', {
					params
				})
				if (mem.code == 200) {
					this.list = this.filterArr(mem.data)
					console.log('mem', this.list)
				}
			},
			close(){
				this.edit = false
				this.arr = []
			},
			//删除专业
			async deledit() {
				if (!this.arr.length) return this.showMsg('请选择专业或者地区');
				let params = {
					userId: this.readData('useId'),
					stype: this.currIdx,
					scode: this.currIdx == 'major' ? this.joinValues(this.arr, 'scode') : this.joinValues(this
						.arr, 'scode')
				}
				let adres = await this.request.get('/api/delMemberSetting', {
					params
				})
				if (adres.code == 200) {
					this.successToShow(adres.msg || '删除成功', call => {
						this.arr = []
						this.majList = []
						this.edit = true
						this.member();
					})
				}
			},
			filterArr(arr) {
				let str = this.currIdx
				return arr.filter(item => item.stype == str);

			},
			gosearch() {
				this.navgateTo('/pages/generate/search', {
					idx: this.currIdx
				})
			}
		}
	}
</script>

<style>
	.calc150{height: calc(100vh - 150rpx)}
</style>